<template>
    <div>
      <h1>机构添加</h1>
      <table class="table table-bordered">
        <tbody>
            <tr>
                <td align="right">机构名称</td>
                <td>
                    <input type="text" v-model="query.institutionName"/>
                </td>
            </tr>
            <tr>
                <td align="right">机构封面</td>
                <td>
                    <input type="file" @change="Img"/>
                    <img :src="query.institutionImg" width="100px" height="140px" v-if="query.institutionImg!=''"/>
                </td>
            </tr>
            <tr>
                <td align="right">特色服务</td>
                <td>
                    <select v-model="query.serviceName">
                        <option value="">请选择</option>
                        <option :value="item.serviceName" v-for="item in list">{{ item.serviceName }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">机构地址</td>
                <td>
                    <input type="text" v-model="query.address"/>
                </td>
            </tr>
            <tr>
                <td align="right">联系电话</td>
                <td>
                    <input type="text" v-model="query.phone"/>
                </td>
            </tr>
            <tr>
                <td align="right">详情</td>
                <td>
                    <textarea v-model="query.desc"></textarea>
                </td>
            </tr>
            <tr>
                <td align="right">状态</td>
                <td>
                    <input type="radio" name="states" :value="0" v-model="query.state"/>发布
                    <input type="radio" name="states" :value="1" v-model="query.state"/>未发布
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="添加" class="btn btn-success" @click="ok"/>
                </td>
            </tr>
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';

import {useCounterStore} from '@/stores/use'
const ac=useCounterStore();

const router=useRouter();
const route=useRoute();

let query:any=reactive
({
  "institutionName": "",
  "institutionImg": "",
  "serviceName": "",
  "address": "",
  "phone": "",
  "desc": "",
  "state": 0
})

const Img=(e:any)=>
{
    console.log(e);
    let f=e.target.files[0];
    let obj=new FormData();
    obj.append('file',f);
    axios
    ({
        url:'/api/Organ/Img',
        method:'post',
        data:obj
    })
    .then(res=>{
        if(res.data=="不是图片")
        {
            alert("您上传的不是图片");
            return;
        }
        if(res.data=="图片大小大于2M")
        {
            alert("图片不能大于2M");
            return;
        }
        query.institutionImg=res.data;
    })
    .catch(err=>{

    })
}
let list:any=ref([])
onMounted(()=>{
    showservice();
})
const showservice=()=>
{
    axios
    ({
        url:'/api/Organ/ShowService',
        method:'get'
    })
    .then(res=>{
        list.value=res.data;
    })
    .catch(err=>{

    })
}

const ok=()=>{
    if(query.institutionName=="")
    {
        alert("机构名称不能为空");
        return;
    }
    if(query.institutionImg=="")
    {
        alert("机构封面不能为空");
        return;
    }
    if(query.serviceName=="")
    {
        alert("特色服务不能为空");
        return;
    }
    if(query.address=="")
    {
        alert("地址不能为空");
        return;
    }
    if(query.phone=="")
    {
        alert("联系电话不能为空");
        return;
    }
    if(query.desc=="")
    {
        alert("详情不能为空");
        return;
    }
    axios
    ({
        url:'/api/Organ/OrganAdd',
        method:'post',
        data:query
    })
    .then(res=>{
        if(res.data==-1)
        {
            alert("机构名称重复");
            return;
        }
        if(res.data>0)
        {
            alert("添加成功");
            router.push('/organList');
            return;
        }
        else
        {
            alert("添加失败");
            return;
        }
    })
    .catch(err=>{

    })
}


</script>

<style scoped>

</style>